<template>
	<div id='attendance'>
		<div class="attendance-item">
      <div class="title">Paid Time Off (PTO)</div>
      <div class="pto-content">

      </div>
    </div>
    <div class="attendance-item">
      <div class="title">OverTime</div>
      <div class="content">
        <Radio-group class="overtime-radio-group" v-model="employeeOvertimeRuleModel.useRule" vertical>
          <Radio class="overtime-radio-item" label="1">
            Use Company Settings
          </Radio>
          <Radio class="overtime-radio-item" label="2">
           Use custom rules for this employee
          </Radio>
        </Radio-group>
        <div v-if="employeeOvertimeRuleModel.useRule == 2" class="overtime-rule-content">
          <div class="overtime-rule-item">
            <el-checkbox :disabled="weeklyOverTimeDisabled" :true-label="1" :false-label="0" style="width:272px" v-model="employeeOvertimeRuleModel.overtimeRule.isWeeklyOvertime">Calcuate Weekly overtime after</el-checkbox :true-label="1" :false-label="0">
            <Input :disabled="weeklyOverTimeDisabled"  v-model="employeeOvertimeRuleModel.overtimeRule.weeklyOvertimeAmount" type="number" style="width:146px"></Input>
            <span style="margin-left:20px">hours/week</span>
          </div>
          <div class="overtime-rule-item padding-left">
            <el-checkbox :disabled="dailyOverTimeDisabled"  :true-label="1" :false-label="0" v-model="employeeOvertimeRuleModel.overtimeRule.isDailyOvertime" style="width:260px">Also Calcuate Daily overtime after</el-checkbox :true-label="1" :false-label="0">
            <Input :disabled="dailyOverTimeDisabled"  v-model="employeeOvertimeRuleModel.overtimeRule.dailyOvertimeAmount" type="number" style="width:146px"></Input>
            <span style="margin-left:20px">hours/week</span>
          </div>
          <div class="overtime-rule-item padding-left">
            <el-checkbox :disabled="dailyDbOverTimeDisabled"  :true-label="1" :false-label="0" v-model="employeeOvertimeRuleModel.overtimeRule.isDailyDbOvertime" style="width:260px">Also Calcuate Daily doubletime after</el-checkbox :true-label="1" :false-label="0">
            <Input :disabled="dailyDbOverTimeDisabled" v-model="employeeOvertimeRuleModel.overtimeRule.dailyDbOvertimeAmount" type="number" style="width:146px"></Input>
            <span style="margin-left:20px">hours/day</span>
          </div>
          <div class="overtime-rule-item padding-left">
            <el-checkbox v-model="isStateOvertimeRule" :true-label="1" :false-label="0" style="width:260px">Use California overtime rules</el-checkbox :true-label="1" :false-label="0">
            <div class="overtime-rule-item-tip">
              Any time worked in excess of 8 and up to and including 12 hours per day and for the first 8 hours worked on the seventh consecutive day of work in the work week is counted as overtime. Any time worked in excess of 12 hours in one day and in excess of 8 hours on the seventh consecutive day of work in the work week is counted as doubletime.
            </div>
          </div>
          <div class="btn-group">
            <Button class="default-btn">Cancel</Button>
            <Button class="default-btn active" @click="saveEmployeeOvertimeRule">Save</Button>
          </div>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
    name:'attendance',
		created(){
			this.init();
    },
		computed:{
		  employeeOvertimeRule(){
        return this.$store.getters.employeeOvertimeRule;
      },
      weeklyOverTimeDisabled(){
        return this.isStateOvertimeRule == 1;
      },
      dailyOverTimeDisabled(){
        return this.isStateOvertimeRule == 1 ||  this.employeeOvertimeRuleModel.overtimeRule.isWeeklyOvertime==0 ;
      },
      dailyDbOverTimeDisabled(){
        return this.isStateOvertimeRule == 1 ||  this.employeeOvertimeRuleModel.overtimeRule.isWeeklyOvertime==0 || this.employeeOvertimeRuleModel.overtimeRule.isDailyOvertime==0;
      },
    },
		watch:{
      employeeOvertimeRule(value){
        this.employeeOvertimeRuleModel.employeeId = this.employeeId;
        this.employeeOvertimeRuleModel.useRule = value.useRule;
        this.employeeOvertimeRuleModel.overtimeRule.employeeId = this.employeeId;
        for(var i in this.employeeOvertimeRuleModel.overtimeRule){
          if(value.overtimeRule&&value.overtimeRule[i]){
            this.employeeOvertimeRuleModel.overtimeRule[i] = value.overtimeRule[i];
          }
        }
      },
      'employeeOvertimeRuleModel.overtimeRule.isWeeklyOvertime'(value){
        if(value == 2){
          this.isStateOvertimeRule = 1;
        }
      },
      isStateOvertimeRule(value){
        if(value == 1){
          if(value==1){
            this.employeeOvertimeRuleModel.overtimeRule.isWeeklyOvertime = 1;
            this.employeeOvertimeRuleModel.overtimeRule.weeklyOvertimeAmount = 40;
            this.employeeOvertimeRuleModel.overtimeRule.isDailyOvertime = 1;
            this.employeeOvertimeRuleModel.overtimeRule.dailyOvertimeAmount = 8;
            this.employeeOvertimeRuleModel.overtimeRule.isDailyDbOvertime = 1;
            this.employeeOvertimeRuleModel.overtimeRule.dailyDbOvertimeAmount = 12;
          }
        }
      }
    },
		data(){
			return {
				title:' ',
        employeeId:'',
        overTimeSetting:'aa',
        isStateOvertimeRule:null,
        employeeOvertimeRuleModel:{
          "employeeId":null,//加班id
          "useRule":1,//使用公司的  2使用个人设置
          "overtimeRule":{
          "employeeId":null,//员工id
          "dailyDbOvertimeAmount":null,//双倍加倍时长
          "dailyOvertimeAmount":null,//加班时长
          "isDailyDbOvertime":null,//是否双倍工资加班
          "isDailyOvertime":null,//是否加班
          "isRemoved":null,//是否已经删除
          "isWeeklyOvertime":null,//是否周末加班
          "weeklyOvertimeAmount":null//周末加班时长
          }
        }
			}
		},
    methods:{
      init(){
        this.employeeId = this.$route.params.id;
        this.getEmployeeOverTimeRule();
      },
      getEmployeeOverTimeRule(){
         this.$store.dispatch('getEmployeeOverTimeRule',{employeeId:this.employeeId});
      },
      saveEmployeeOvertimeRule(){
        var paramData = JSON.parse(JSON.stringify(this.employeeOvertimeRuleModel));
        if(this.isStateOvertimeRule == 1){
          this.employeeOvertimeRuleModel.overtimeRule.isWeeklyOvertime =2;
        }
        this.$store.dispatch('switchEmployeeOvertimeRule',paramData);
      }
		}
	}
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss" scoped>
	@import "src/assets/css/variable.scss";

	#attendance {
    padding:50px;
    .attendance-item{
      padding:10px 30px;
      >.title{
        position:relative;
        /*font-family:PingFangTC-Medium;*/
        font-size:16px;
        color:#325570;
        margin-bottom:12px;
        &:before{
          content:"";
          position:absolute;
          display:inline-block;
          left:-30px;
          top:8px;
          width:8px;
          height:8px;
          vertical-align:middle;
          border-radius:50%;
          background-color:$baseColor;
        }
      }
      >.content{
        .overtime-radio-group{
          margin-bottom:10px;
          .overtime-radio-item{
            height:46px;
            line-height:46px;
          }
        }
        .overtime-rule-content{
          .overtime-rule-item{
            line-height:40px;
            &.padding-left{
              padding-left:12px;
            }
          }
          .overtime-rule-item-tip{
            width:663px;
            padding:0 0 0 20px;
            line-height:20px;
            font-size:12px;
            color:#325570;
            text-align:justify;
          }
          .btn-group{
            margin: 30px auto;
            text-align: right;
            button{
              margin: 0 20px;
            }
          }
        }
      }
    }
	}
</style>
